<script lang="ts" setup>
import { useDict } from '@/hooks'

defineOptions({ name: 'CellDict' })

const props = defineProps({
  code: {
    type: String,
    required: true,
  },
  value: {
    required: true,
  },
  tag: {
    type: Boolean,
    required: false,
    default: true,
  },
})

const dict = useDict(props.code)
const dictItem = ref()
const color = ref()

watch(() => props.value, () => {
  dictItem.value = dict[props.value] || { label: '', value: '' }

  switch (dictItem.value?.extend?.color) {
    case 'primary':
      color.value = 'arcoblue'
      break
    case 'success':
      color.value = 'green'
      break
    case 'warning':
      color.value = 'orangered'
      break
    case 'error':
      color.value = 'red'
      break
    case 'default':
      color.value = 'gray'
      break
    default:
      color.value = dictItem.value?.extend?.color
      break
  }
}, { immediate: true })
</script>

<template>
  <span v-if="!dictItem" />
  <span v-if="!tag">{{ dictItem.label }} </span>
  <a-tag v-else :color="color">
    {{ dictItem.label }}
  </a-tag>
</template>

<style lang="less" scoped></style>
